<template>
  <div class="bg_f2">
    <div id="MMP">
      <div class="charList">
        <a class="ub ub-ac ub-pc" v-if="cityPicker.citys" v-for="(item, index) in Object.keys(cityPicker.citys)" herf="javascript:void(0)" @click="aClick(item)">
          {{item}}
        </a>
      </div>
      <div class="ub ub-ver" id="hotCityBox">
        <div class="ub fz08 fc_purple citys">热点城市</div>
        <div class="ub citys" v-if="cityPicker.hotCity" v-for="(item, index) in cityPicker.hotCity" @click="selCity(item.city, item.code3)">
          {{item.city}}
        </div>
      </div>
      <div class="ub ub-ver">
        <div class="ub ub-ver" v-for="(items, key) in cityPicker.citys">
          <div class="ub fz08 fc_purple citys" :id="key">{{key}}</div>
          <div class="ub citys" v-for="(item, k) in items" @click="selCity(item.city, item.code3)">{{item.city}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '关闭',
      right: '',
      middle: '选择城市',
      ifshow: true,
      leftAction: '/flights',
      leftIcon: 'closeIcon',
      rightAction: '',
      rightIcon: ''
    });
    if (!this.cityPicker.ifInit) {
      this.getCities();
    }
  },
  data: function () {
    return {
      // keys: ''
      // defaultCity: ''
    }
  },
  components: {
  },
  computed: mapState(['cityPicker']),
  methods: {
    aClick: function (item) {
      // this.$router.go(-1);
      // this.$router.replace('/' + item);
      // this.$router.replace('/cityPicker');
      // console.log('#' + item);
      let anchor = this.$el.querySelector('#' + item);
      let hotCity = this.$el.querySelector('#hotCityBox');
      let MMP = this.$el.querySelector('#MMP');
      // let anchor = document.getElementById(item);
      let anchorP1 = anchor.offsetParent; // 父容器
      console.log('anchorP');
      console.log(MMP);
      console.log(anchorP1.offsetTop + hotCity.offsetHeight);
      // anchor.scrollTop = anchorP1.offsetTop + hotCity.offsetHeight;
      anchor.scrollIntoView(true);
      console.log(MMP.scrollTop);
    },
    getCities: function () {
      let content = {};
      let data = this.$utils.getUserContent(content);
      let self = this;
      this.$utils.ajax(data, 'queryAirlineCityList', self, function (data) {
        console.log(data);
        let content = data.content;
        let citys = content.city_list;
        let hotCity = content.hot_city_list;
        let defaultCity = content.recomendFlight;
        let beginCity = defaultCity.departureCity;
        let arriveCity = defaultCity.arrivedCity;
        self.$store.commit('setCityPickerArr', [{ name: 'hotCity', arr: hotCity }, { name: 'citys', arr: citys }]);
        self.$store.commit('setCity', { type: 0, city: beginCity.code3, cityName: beginCity.city });
        self.$store.commit('setCity', { type: 1, city: arriveCity.code3, cityName: arriveCity.city });
        // self.getKey();
      })
    },
    selCity: function (cityName, city) {
      console.log(city + ',' + cityName)
      let cityPicker = this.cityPicker;
      let arrPick = ['endCity', 'beginCity']
      if (cityPicker[arrPick[cityPicker.type]] === city) {
        this.$store.dispatch('showTx', { text: '不能重复选择该城市' })
        return false;
      }
      this.$store.commit('setCity', { city: city, cityName: cityName });
      this.$router.push('/flights')
    }
    // getKey: function() {
    //   let citys = this.cityPicker.citys
    //   console.log(citys)
    //   console.log(Object.keys(citys))
    //   this.keys = Object.keys(citys);
    // }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../stylus/base.styl';
.citys
  padding: f_times(0.75);
.charList
  position: fixed;
  right: 0;
  z-index: 20;
  width: f_times(2);
  >a
    width: 100%;
    color: gray;
    padding-bottom: f_times(0.3);
</style>